<template>
    <a-drawer
        placement="top"
        :closable="false"
        :visible="visible"
        height="100%"
        wrapClassName="add-power"
        @close="closeTopDrawer"
        :destroyOnClose="true"
        :headerStyle="{
              background: '#fff',
              padding: '0 0.2rem 0 0.3rem',}"
        :bodyStyle="{padding: '0.3rem 0 0 0',}">
        <template #title>
            <div class="head-box">
                <span>添加维保记录</span>
                <div class="head-btn">
                    <a-button @click="closeTopDrawer">取消</a-button>
                    <a-button type="primary" class="save-btn" @click="saveStation">保存</a-button>
                </div>
            </div>
        </template>
        <div class="content-box">
            <a-row>
                <a-col :span="16" style="transform: translate(-50%, 0px);left: 50%;">
                    <a-form-model :model="form" :rules="rules" ref="ruleForm">
                        <a-form-model-item label="名称" prop="title" required>
                            <a-input v-model="form.title"></a-input>
                        </a-form-model-item>
                    </a-form-model>
                    <a-form-model :model="form" :rules="rules" ref="ruleForm">
                        <a-form-model-item label="维保人" prop="stationName" required>
                            <div class="maintenanceUser"><span class="btn">+成员</span></div>
                        </a-form-model-item>
                    </a-form-model>
                    <a-form-model :model="form" :rules="rules" ref="ruleForm">
                        <a-form-model-item label="维保系统" prop="maintenanceType" required class="system">
                            <a-select class="type-select" v-model="form.maintenanceType">
                                <a-select-option :key="maintenanceType.id" v-for="maintenanceType in maintenanceTypeList">
                                    {{ maintenanceType.title }}
                                </a-select-option>
                            </a-select>
                            <div class="maintenance_system"><span class="btn">+成员</span></div>
                            <a-select class="type-select" v-model="form.maintenanceObject">
                                <a-select-option :key="maintenanceObject.id" v-for="maintenanceObject in maintenanceObjectList">
                                    {{ maintenanceObject.title }}
                                </a-select-option>
                            </a-select>
                            <a-input></a-input>
                        </a-form-model-item>
                    </a-form-model>
                    <a-form-model :model="form" :rules="rules" ref="ruleForm">
                        <a-form-model-item label="维保时间" prop="createTime" required>
                            <a-date-picker v-model="form.createTime" :allowClear="false"/>
                        </a-form-model-item>
                    </a-form-model>
                    <a-form-model :model="form" :rules="rules" ref="ruleForm">
                        <a-form-model-item label="维保内容" prop="maintenanceDesc" required>
                            <a-textarea v-model="form.maintenanceDesc"></a-textarea>
                        </a-form-model-item>
                    </a-form-model>
                    <a-form-model :model="form" :rules="rules" ref="ruleForm">
                        <a-form-model-item label="备注" prop="remark" required>
                            <a-textarea v-model="form.remark"></a-textarea>
                        </a-form-model-item>
                    </a-form-model>
                </a-col>
            </a-row>
        </div>
    </a-drawer>
</template>

<script>

export default {
    data() {
        return {
            maintenanceTypeList: [
                {id: 1, title: '电站'}
            ],
            maintenanceObjectList: [
                {id: 1, title: '设备'},
                {id: 2, title: '其他'}
            ],
            visible: false,
            form: {},
            rules: {
                stationName: [
                    {
                        required: true,
                        message: "请填写电站名称",
                        trigger: "blur",
                    },
                    {
                        max: 30,
                        message: "电站名称不能超过30字",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    props: {
        topDrawer: {type: Boolean, default: false},
    },
    watch: {
        async topDrawer( newv ) {
            this.visible = newv;
            if ( newv ) {
                console.log('打开添加抽屉')
            }
        },
    },
    methods: {
        closeTopDrawer() {
            this.$refs.ruleForm.resetFields ();
            this.$emit ( "closeAddMaintenance" );
        },
        onChange() {
        },
        // 保存电站信息
        saveStation() {
            this.$refs.ruleForm.validate ( ( valid ) => {
                if ( valid ) {
                    console.log ( '---' )
                } else {
                    return this.$message.warning ( {
                        content: "请填写完整信息",
                    } );
                }
            } );
        },
    },
};
</script>


<style lang="less" scoped>
.add-power {
    .head-box {
        width: 100%;
        height: 64px;
        font-size: 20px;
        color: #252b3a;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .head-btn {
            /deep/ .ant-btn {
                font-size: 12px;
            }
            .save-btn {
                margin-left: 8px;
            }
        }
    }
    .content-box {
        width: 100%;
        height: 100%;
        padding-top: 24px;
        .left-box {
            .all-msg {
                display: flex;
                flex-direction: column;
                font-size: 14px;
                margin-top: 24px;
                border-right: 1px solid rgba(0, 0, 0, 0.1);
                div {
                    padding: 7px 15px;
                    cursor: pointer;
                    &:hover {
                        color: #048fff;
                    }
                }
            }
        }
        /deep/.ant-form-item-children{
            display: flex;
            justify-content: space-between;
            .ant-select {
                width: 18%;
            }
        }
        /deep/.system .ant-form-item-children .ant-input{
            width: 30%;
        }
        /deep/.ant-calendar-picker{
            width: 30%;
        }
    }
}
.maintenanceUser{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: 'tnum';
    position: relative;
    display: inline-block;
    width: 100%;
    height: 32px;
    padding: 4px 11px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    transition: all 0.3s;
    .btn{
        height: 1.375rem;
        margin-top: .125rem;
        margin-bottom: .125rem;
        color: #048fff;
        cursor: pointer;
    }
}
.maintenance_system {
    width: 30%;
    height: 32px;
    padding: 4px 11px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    line-height: 2;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    .btn {
        height: 1.375rem;
        margin-top: .125rem;
        margin-bottom: .125rem;
        color: #048fff;
        cursor: pointer;
    }
}
/deep/ .ant-input {
    font-size: 14px;
}
</style>
